<template>
  <a-table
      class="ant-table-striped"
      :columns="columns"
      :data-source="dataSource"
      :row-class-name="
      (_record, index) => (index % 2 === 0 ? 'ant-table-row-striped' : '')
    "
      bordered
      :loading="props.loading"
      :scroll="{ y: 500 }"
      :pagination="pagination"
      @change="changePage"
  >
    <template #emptyText>
      <div class="empty-text">
        <a-empty description="暂无数据"></a-empty>
      </div>
    </template>
  </a-table>
</template>
<script setup>

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array,
    default: () => [],
  }
});
const emit = defineEmits(["change"]);
const dataSource = reactive([]);
const columns = reactive([]);

watchEffect(() => {
  dataSource.splice(0, dataSource.length, ...props.data);
  columns.splice(0, columns.length, ...props.columns);
});


// 分页相关
const page = reactive({
  total: dataSource.length,
  pageSize: 10,
  current: 1,
});
const pagination = computed(() => ({
  size: 'default',
  current: page.current,
  pageSize: page.pageSize,
  total: page.total,
  pageSizeOptions: ["10", "50", "100", "200"],
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
  locale: {items_per_page: "条/页"}
}));
const changePage = (pagination) => {
  page.current = pagination.current;
  page.pageSize = pagination.pageSize;
};
</script>
<style scoped lang="scss">
:deep(.ant-table-row-striped) td {
  background-color: rgba(0, 0, 0, 0.02);
}

.ant-table-body {
  scrollbar-width: none;
}

[data-doc-theme="light"] .ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}

[data-doc-theme="dark"] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}
</style>
